<template>
    <view class="container">
        <view style="position: sticky;z-index: 99;top: 0;background: #f1f1f1">
            <uni-search-bar placeholder="查岗人姓名" radius="100" bgColor="#fff" @confirm="search" v-model="searchName"/>
        </view>
<!--        <view>
            <view v-for="data in tableData" :key="data.id">
                <uni-card :title="data.userName" :sub-title="data.ip" :extra="data.state"
                          @click="navigateToPage(data)">
                    <text class="uni-body">{{data.result}}</text>
                </uni-card>
            </view>
        </view> -->
		<view class="padding">
			<view v-for="data in tableData" :key="data.id" class="card" @click="navigateToPage(data)">
				<view class="card-header">
					<view class="title">{{ data.userName }}</view>
					<view class="status" :class="data.state === '已查岗' ? 'success' : 'warning'">
						{{ data.state }}
					</view>
				</view>
				<view class="card-body">
					<view class="info-row">
						<view class="icon-box">
							<uni-icons type="home" size="24" color="#666" />
						</view>
						<text class="info-text">{{ data.ip }}</text>
					</view>
					<view class="info-row">
						<view class="icon-box">
							<uni-icons type="calendar" size="24" color="#666" />
						</view>
						<text class="info-text">{{ data.startTime }}</text>
					</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
    import request from '@/util/request';
    export default {
        data() {
            return {
                tableData: [],
                searchName: '',
                pageNum: 1,
                pageSize: 10,
                total: 0,
            }
        },
        mounted() {
            this.load();
        },
		onPullDownRefresh() {
			this.pageNum=1;
			this.pageSize=10;
			this.load()
			uni.stopPullDownRefresh();
		},
		onReachBottom() { //触底事件
			if (this.pageNum * this.pageSize >= this.total) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none',
					duration: 1000
				});
			} else {
				uni.showLoading({
					title: '加载中'
				});
				this.pageSize+=10
				this.load()
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			}
		},
        methods: {
            search(res) {
                this.load();
            },
            load() {
                let id = this.$store.state.userInfo.id
                let level = this.$store.state.userInfo.level;
                let organizationId = this.$store.state.userInfo.organization;
                request.get("/record-check/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&keyWord="+this.searchName+
                    "&userId="+ id + "&level="+ level + "&organizationId="+ organizationId).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "record") {
                                this.tableData = res.data[key];
                                for (let i = 0; i < this.tableData.length; i++) {
                                    if (this.tableData[i].state === "0") {
                                        this.tableData[i].stateName = "已查岗";
                                    } else if (this.tableData[i].state === "1") {
                                        this.tableData[i].stateName = "未查岗";
                                    }
                                }
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        uni.showToast({
                            title: "失败",
                            icon:'error',
                            duration: 2000
                        });
                    }
                })
            },
            navigateToPage(data) {
                var objStr = JSON.stringify(data);
                uni.navigateTo({
                    url: '/pages/check/particular?check=' + objStr,
                });
            },
        },
        onBackPress() {
            // #ifdef APP-PLUS
            plus.key.hideSoftKeybord();
            // #endif
        }
    }
</script>

<style lang="scss" scoped>
	@import url("../../common/globleCSS/card.css");
    .container {
        overflow: visible;
    }

    .radius1 {
        radius: 25
    }
</style>
